<template>
  <div class="maxbox">
    <!-- 上半数量统计 -->
    <div class="huahua">
      <span class="maintopspan">
        <div class="maintoptop">
          <h3>设备故障统计</h3>
          <span @click="funtime()">
            <i class="el-icon-refresh"> </i>
            刷新
          </span>
        </div>
        <span>数据更新时间: {{ nowdata }}{{ noontip }}{{ nowtime }}</span>
      </span>
      <span class="maintopspan1">
        <span class="span1colorbox"><img src="../../assets/i1.jpg" /></span>
        <span class="spanTbox">
          <span class="span1T">故障设备总数</span>
          <span class="span1num">{{ totalnum }}</span>
        </span>
      </span>
      <span class="maintopspan1">
        <span class="span1colorbox"><img src="../../assets/i2.jpg" /></span>
        <span class="spanTbox">
          <span class="span1T">当前未处理</span>
          <span class="span1num">{{ tainum }}</span>
        </span>
      </span>
      <span class="maintopspan1">
        <span class="span1colorbox"><img src="../../assets/i3.jpg" /></span>
        <span class="spanTbox">
          <span class="span1T">当日已处理</span>
          <span class="span1num">{{ daynum }}</span>
        </span>
      </span>
      <span class="maintopspan1">
        <span class="span1colorbox"><img src="../../assets/i4.jpg" /></span>
        <span class="spanTbox">
          <span class="span1T">当月已处理</span>
          <span class="span1num">{{ monnum }}</span>
        </span>
      </span>
    </div>
    <!-- 下半主要内容 -->
    <div class="mainmidd">
      <!-- 输入框 -->
      <div class="inputBigbox">
        <div class="inputbox">
          <el-input v-model="bian1" placeholder="请输入设备编号"></el-input>
          <el-input v-model="bian2" placeholder="请输入设备名称"></el-input>
          <template>
            <el-select v-model="value2" placeholder="选择责任人">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
          <template>
            <el-select v-model="value3" placeholder="选择处理状态">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
          <el-button
            type="primary"
            plain
            icon="el-icon-search"
            @click="seacher()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-refresh"
            @click="reset()"
            >重置</el-button
          >
        </div>
        <el-button
          type="primary"
          plain
          icon="el-icon-delete"
          class="delebtn"
          @click="alldel()"
          >批量删除</el-button
        >
      </div>
      <!-- 数据 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="400"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="deviceNo" label="设备编号"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column
          prop="subsystemTypes"
          label="子系统名称"
        ></el-table-column>
        <el-table-column
          prop="faultDescription"
          label="故障描述"
        ></el-table-column>
        <el-table-column prop="department" label="所属部门"></el-table-column>
        <el-table-column prop="installAddr" label="安装位置"></el-table-column>
        <el-table-column label="故障发生时间" width="200">
          <template slot-scope="scope">{{
            new Date(scope.row.timeFailure).toLocaleString()
          }}</template>
        </el-table-column>
        <el-table-column prop="safetyDir" label="责任人"> </el-table-column>
        <el-table-column label="处理状态">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.processingState == null"
              class="obtncol"
              >未完成</el-button
            >
            <el-button
              v-else
              size="mini"
              :class="{
                gbtncol: scope.row.processingState == '已完成',
                obtncol:
                  scope.row.processingState == '未处理' ||
                  scope.row.processingState == null,
                bbtncol: scope.row.processingState == '维修中',
              }"
              >{{ scope.row.processingState }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openEdit(scope.$index, tableData)"
              >处理详情</el-button
            >
            <el-button type="text" @click="deldata(scope.$index, tableData)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagebox">
        <span
          >当前显示{{ nowtotal }}条/共{{ total }}条,第{{ nowpage }}页/共{{
            Math.ceil(total / aa)
          }}页</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="counts"
            :page-size="count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="故障处理详情" :visible.sync="addDialog">
      <div class="div1">
        <h2>故障处理</h2>
        <h2>
          处理状态：<span>{{ processingState }}</span>
        </h2>
      </div>
      <div class="div2">
        <h3>处理/审核描述</h3>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入处理描述"
          v-model="textarea"
          :disabled="
            !(
              processingState == '未处理' ||
              processingState == '维修中' ||
              processingState == null
            )
          "
        >
        </el-input>
      </div>
      <div class="div3">
        <h3>上传现场照片</h3>
        <div>
          <el-upload
            class="avatar-uploader"
            action="http://120.55.49.64:8080/FireEmergency/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="handleUpload"
            :disabled="
              !(
                processingState == '未处理' ||
                processingState == '维修中' ||
                processingState == null
              )
            "
          >
            <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="div4">
        <h2>故障详情</h2>
        <div class="contentul">
          <div>
            <span
              >设备编号：<span>{{ deviceNo }}</span></span
            >
            <span
              >故障描述： <span>{{ faultDescription }}</span></span
            >
            <span
              >上报时间：<span> {{ timeFailure }}</span></span
            >
            <span>版本号：<span> V 2.0.5</span></span>
          </div>
          <div>
            <span
              >设备名称： <span>{{ deviceName }}</span></span
            >
            <span
              >所属组织： <span>{{ department }}</span></span
            >
            <span
              >责任人： <span>{{ safetyDir }}</span></span
            >
          </div>
          <div>
            <span
              >子系统类型：<span>{{ subsystemTypes }}</span></span
            >
            <span
              >详细点位： <span> {{ installAddr }}</span></span
            >
            <span>联系电话： <span> 1301234****</span></span>
          </div>
        </div>
      </div>
      <div class="div5">
        <el-button
          plain
          @click="btncomplete()"
          :disabled="!(processingState == '未处理' || processingState == null)"
          >直接处置</el-button
        >
        <el-button
          plain
          :disabled="!(processingState == '未处理' || processingState == null)"
          @click="maintainadd()"
          >+维修派单</el-button
        >
        <el-button
          plain
          @click="maintaindeal()"
          :disabled="!(processingState == '维修中')"
          >维修审核</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      //
      weinum: 0,
      multipleSelection: [],
      //时间
      timer: null,
      nowdata: "",
      nowtime: "",
      noontip: "",
      //处理数量
      totalnum: 0,
      tainum: 0,
      daynum: 0,
      monnum: 0,
      //输入框
      options: [],
      options1: [
        {
          value: "未处理",
          label: "未处理",
        },
        {
          value: "维修中",
          label: "维修中",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      value1: "",
      value2: "",
      value3: "",
      bian1: "",
      bian2: "",
      tableData: [],
      addDialog: false,
      //描述和图片
      textarea: "",
      dialogImageUrl: "",
      fileurl: "",
      //详情
      processingState: "",
      deviceNo: "",
      department: "",
      faultDescription: "",
      timeFailure: "",
      deviceName: "",
      safetyDir: "",
      subsystemTypes: "",
      installAddr: "",
      // 分页
      total: 0,
      count: 10,
      counts: [10, 20, 50, 100],
      nowpage: 1,
      aa: 10,
      nowtotal: 0,
      ids: [],
      //搜索
      faultManagementDto: {
        deviceName: "",
        deviceNo: "",
        endTime: "",
        processingState: "",
        safetyDir: "",
        startTime: "",
      },
      faultManagementDtonum: {
        deviceName: "",
        deviceNo: "",
        endTime: "",
        processingState: "",
        safetyDir: "",
        startTime: "",
      },
    };
  },
  mounted: function () {
    this.funtime();
    this.untreated();
    this.getdata();
    this.untreatedmonth();
    this.untreatedday();
    this.zheren();
  },
  methods: {
    //责任人下拉内容
    zheren: function () {
      axios({
        url: "faultManagements/1/1000",
        method: "get",
        params: {},
      }).then(({ data }) => {
        if (data.code == 200) {
          var arr = [];
          this.safetyDirs = data.data;
          for (var i = 0; i < this.safetyDirs.length; i++) {
            arr.push(this.safetyDirs[i].safetyDir);
          }
          for (var i = 0; i < arr.length; i++) {
            for (var j = i + 1; j < arr.length; j++) {
              if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                j--;
              }
            }
          }
          var arr2 = arr;
          for (var i = 0; i < arr2.length; i++) {
            let vote = {};
            vote.label = arr2[i];
            vote.value = arr2[i];
            this.options.push(vote);
          }
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    //打开弹框
    openEdit(index, rows) {
      this.addDialog = true;
      const id = rows[index].id;
      const status = rows[index].processingState;
      if (status == "已完成") {
        axios({
          url: `/faultManagementDescribe/queryById/${id}`,
          method: "get",
          data: "",
        }).then(({ data }) => {
          this.textarea = data.data.managementDescribe;
          this.dialogImageUrl = data.data.pictureAddress;
        });
      } else {
        this.textarea = "";
        this.dialogImageUrl = "";
      }
      this.deviceNo = rows[index].deviceNo;
      this.deviceName = rows[index].deviceName;
      this.subsystemTypes = rows[index].subsystemTypes;
      this.faultDescription = rows[index].faultDescription;
      this.department = rows[index].department;
      this.installAddr = rows[index].installAddr;
      this.timeFailure = new Date(rows[index].timeFailure).toLocaleString();
      this.safetyDir = rows[index].safetyDir;
      this.processingState = rows[index].processingState;
      this.a = rows[index].id;
    },
    //删除数据
    deldata(index, rows) {
      var id = rows[index].id;
      axios({
        url: `faultManagementDescribe/delete/${id}`,
        method: "delete",
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message.success("删除成功！");
          this.getDate();
        } else {
          this.$message.error("删除失败");
        }
      });
      axios({
        url: `/faultManagement/delete/${id}`,
        method: "delete",
        params: {},
      }).then(({ data }) => {
        this.getdata();
      });
    },
    //批量删除
    alldel: function () {
      var arr = this.$refs.multipleTable.selection;
      for (var i = 0; i < arr.length; i++) {
        this.ids.push(arr[i].id);
      }
      axios({
        url: "/faultManagement/deleteAll",
        method: "delete",
        data: this.ids,
      }).then(({ data }) => {
        if (data.code == 200) {
          this.getdata();
          this.$message.success("删除成功！");
        } else {
          this.$message.error("删除失败！");
        }
      });
      //故障详情批量删除;
      axios({
        url: "/faultManagementDescribe/deleteAll",
        method: "delete",
        data: this.ids,
      }).then(({ data }) => {
        if (data.code == 200) {
          this.getdata();
          this.$message.success("删除成功！");
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    //获取图片
    handleAvatarSuccess(res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
    },
    //上传图片给后端
    handleUpload(file) {
      const formData = new FormData();
      formData.append("file", file);
      axios({
        url: "/upload",
        method: "post",
        header: {
          "content-type": "multipart/form-data",
          data: formData,
        },
      }).then(({ data }) => {
        this.fileurl = data.data.filePath;
      });
    },
    //获取数据 室外消防栓系统
    getdata: function () {
      var current = this.nowpage;
      var limit = this.count;
      axios({
        url: `/faultManagement/safetyDir/${current}/${limit}`,
        method: "get",
        params: { subsystemTypes: "室外消防栓系统", safetyDir: "" },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.tableData = data.data;
          this.total = data.total;
          this.nowtotal = data.data.length;
        } else {
          this.$message.error("数据加载失败！");
        }
      });

      axios({
        url: `faultManagements/${current}/${limit}`,
        method: "get",
        params: {},
      }).then(({ data }) => {
        this.totalnum = data.total;
      });
    },
    handleSizeChange(val) {
      this.aa = val;
      this.count = val;
      this.getdata();
    },
    //分页发生变化
    handleCurrentChange(val) {
      this.nowpage = `${val}`;
      this.getdata();
    },
    //添加详情
    btncomplete: function () {
      axios({
        url: "/faultManagementDescribe/addDescribe",
        method: "post",
        data: {
          id: this.a,
          managementDescribe: this.textarea,
        },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.untreated();
          this.untreatedday();
          this.chuli();
          this.addDialog = false;
          this.$message.success("详情添加成功！");
        } else {
          this.$message.error("详情添加失败！");
        }
      });
    },
    //直接处理
    chuli: function () {
      var id = this.a;
      axios({
        url: `/faultManagement/complete/${id}`,
        method: "put",
        data: "",
      }).then(({ data }) => {
        this.getdata();
        this.untreatedday();
      });
    },
    //维修审核
    maintaindeal: function () {
      var id = this.a;
      axios({
        url: `/faultManagement/deal/${id}`,
        method: "put",
      }).then(({ data }) => {
        //console.log(data.data);
        this.untreated();
        this.untreatedday();
        this.getdata();
        this.btncomplete();
        this.addDialog = false;
      });
    },
    //维修派单
    maintainadd: function () {
      console.log(1111111);
      var id = this.a;
      axios({
        url: `/faultManagement/maintenance/${id}`,
        method: "put",
      }).then(({ data }) => {
        console.log(data.code);
        this.untreated();
        this.untreatedday();
        this.getdata();
        this.addDialog = false;
        this.$message.success("开始维修");
      });
    },
    //未处理的数量
    untreated: function () {
      var current = this.nowpage;
      var limit = this.count;
      this.faultManagementDtonum.processingState = "未完成";
      axios({
        url: `/faultManagement/query/${current}/${limit}`,
        method: "post",
        data: this.faultManagementDtonum,
      }).then(({ data }) => {
        this.tainum = data.data.length;
        //console.log(data.data.length);
      });
    },
    //当日已处理
    untreatedday: function () {
      var current = this.nowpage;
      var limit = this.count;
      this.faultManagementDtonum.processingState = "已完成";
      axios({
        url: `/faultManagement/query/${current}/${limit}`,
        method: "post",
        data: this.faultManagementDtonum,
      }).then(({ data }) => {
        //console.log(data.data.length);
        this.daynum = data.data.length;
      });
    },
    //当月已处理
    untreatedmonth: function () {
      var current = this.nowpage;
      var limit = this.count;
      this.faultManagementDtonum.processingState = "已完成";
      axios({
        url: `/faultManagement/query/${current}/${limit}`,
        method: "post",
        data: this.faultManagementDtonum,
      }).then(({ data }) => {
        //console.log(data.data.length);
        var todaymonth = new Date();
        var nums = [];
        for (var i = 0; i < data.data.length; i++) {
          if (
            new Date(data.data[i].timeFailure).getMonth() + 1 ==
              todaymonth.getMonth() + 1 &&
            new Date(data.data[i].timeFailure).getYear() == todaymonth.getYear()
          ) {
            nums.push(i);
          }
          this.monnum = nums.length;
          //console.log(nums.length);
        }
      });
    },
    //搜索
    seacher: function () {
      //console.log(this.value1);
      var current = this.nowpage;
      var limit = this.count;
      this.faultManagementDto.deviceName = this.bian2;
      this.faultManagementDto.deviceNo = this.bian1;
      this.faultManagementDto.processingState = this.value3;
      this.faultManagementDto.safetyDir = this.value2;
      this.faultManagementDto.endTime = this.value1[1];
      this.faultManagementDto.startTime = this.value1[0];
      //console.log(this.faultManagementDto);
      axios({
        url: `/faultManagement/query/${current}/${limit}`,
        method: "post",
        data: this.faultManagementDto,
      }).then(({ data }) => {
        //console.log(data.data);
        if (data.code == 200) {
          this.tableData = data.data;
          this.total = data.total;
          this.nowtotal = data.data.length;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    //重置
    reset: function () {
      this.bian1 = "";
      this.bian2 = "";
      this.value1 = "";
      this.value2 = "";
      this.value3 = "";
      this.getdata();
    },
    //刷新时间
    funtime: function () {
      let aData = new Date();
      //上下晚
      if (aData.getHours() >= 0 && aData.getHours() < 12) {
        this.noontip = "上午";
      } else if (aData.getHours() >= 12 && aData.getHours() < 18) {
        this.noontip = "下午";
      } else {
        this.noontip = "晚上";
      }
      //年
      let dateValue =
        aData.getFullYear() +
        "/" +
        (aData.getMonth() + 1) +
        "/" +
        aData.getDate();
      this.nowdata = dateValue;
      // console.log(dateValue);
      //小时
      let timeValue =
        aData.getHours() + ":" + aData.getMinutes() + ":" + aData.getSeconds();
      this.nowtime = timeValue;
      //console.log(timeValue);
    },
  },
};
</script>

<style lang="less" scoped>
.maxbox {
  height: 100%;
}
.mainmidd {
  background-color: white;
  margin-top: 10px;
  height: calc(100% - 129px);
}
.huahua {
  display: flex;
  justify-content: space-between;
  .maintopspan {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 20%;
    padding: 10px 0;
    background-color: white;
    height: 100px;
    .maintoptop {
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        border: 1px solid rgb(230, 227, 227);
        border-radius: 2px;
        padding: 3px 20px 3px 10px;
        display: flex;
        flex-direction: cow;
        align-items: center;
        i {
          font-size: 30px;
          margin-right: 20px;
          font-weight: bold;
          color: rgb(0, 140, 255);
        }
      }
    }
  }
  .maintopspan1 {
    background-color: white;
    width: 19.5%;
    height: 100px;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    .span1colorbox {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 80px;
      margin-left: 50px;
      margin-top: 15px;
    }
    .spanTbox {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 30px;
      .span1num {
        font-size: 30px;
        font-weight: bold;
      }
      .span1T {
        font-size: 18px;
      }
    }
  }
}
.inputBigbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .inputbox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    width: calc(100% - 40px);
    .el-input {
      width: 250px;
    }
  }
  .delebtn {
    margin: 10px 0 30px 20px;
  }
}
.el-dialog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .div1 {
    display: flex;
    justify-content: space-between;
  }
  .div2,
  .div3 {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    h3 {
      padding: 10px 0;
    }
  }
  .div4 {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    h2 {
      padding: 10px 0;
    }
    .contentul {
      border: 1px solid rgb(212, 210, 210);
      width: 100%;
      border-radius: 5px;
      display: flex;
      padding: 10px 0;
      flex-direction: cow;
      font-size: 15px;
      justify-content: space-between;
      div {
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        align-items: flex-start;
        line-height: 40px;
        padding: 10px 20px;
        span {
          color: black;
          span {
            color: rgb(124, 122, 122);
          }
        }
      }
    }
  }
  .div5 {
    display: flex;
    flex-direction: cow;
    justify-content: flex-end;
    padding: 20px 0 0 0;
  }
}
.pagebox {
  display: flex;
  justify-content: space-between;
  padding: 80px 10px 40px 10px;
}
// 处理状态按钮颜色
.obtncol {
  background-color: #fdebd3;
  border-color: #f59b25;
  color: black;
}
.bbtncol {
  background-color: #d8e8fa;
  border-color: #3b8fe6;
  color: black;
}

.gbtncol {
  background-color: #e2f0cd;
  border-color: #71b605;
  color: black;
}
//图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
